<template>
  <div id="app">
    <van-nav-bar ref="headerBarRef" fixed class="green-header">
      <div
        slot="left"
        class="left-bar"
        :class="headerTransition"
        @click="pageBack"
      >
        <template v-if="isHome">
          <img src="@/assets/image/logo.png" style="height:20px">
        </template>
        <template v-else>
          <svg-icon class="nav-icon" icon-class="xiangzuo" />
          <span>{{ title }}</span>
        </template>
      </div>
      <div slot="right" class="right-bar" :class="headerTransition">
        <div class="icon-home" @click="goHome">
          <img src="@/assets/image/icon_index.png">
        </div>
        <span />
        <div class="icon-close" @click="backOrigin">
          <img src="@/assets/image/icon_close.png">
        </div>
      </div>
    </van-nav-bar>
    <keep-alive v-if="$route.meta.keepAlive">
      <router-view
        id="bodyContent"
        class="bodyBox"
        :style="{ paddingTop: navBarHeight + 'px' }"
      />
    </keep-alive>
    <transition
      v-if="!$route.meta.keepAlive"
      :name="viewTransition"
      :css="!!direction"
    >
      <!-- :style="{height:contentHeight}"  -->
      <router-view
        id="bodyContent"
        class="bodyBox"
        :style="{ paddingTop: navBarHeight + 'px' }"
      />
    </transition>
    <target-instrusction />
    <float-nav />
    <vconsole />
  </div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
// import { getServerTime } from '@/apis/api'
import TargetInstrusction from '@/components/TargetInstrusction'
import FloatNav from '@/components/FloatNav'
import Vconsole from './components/Vconsole'
export default {
  name: 'Layout',
  components: { TargetInstrusction, FloatNav, Vconsole },
  data() {
    return {
      navBarHeight: 0
    }
  },
  computed: {
    ...mapGetters(['direction']),
    viewTransition() {
      if (!this.direction) return ''
      return 'app-pop-' + (this.direction === 'forward' ? 'in' : 'out')
    },
    showTabBar() {
      return this.$route.meta.showTabBar || false
    },
    title() {
      let pageTitle = this.$route.meta.title || '全友驾驶舱'
      if (this.$route.query && this.$route.query.pageTitle) {
        pageTitle = this.$route.query.pageTitle
      }
      return pageTitle
    },
    contentHeight() {
      if (this.showTabBar) {
        return 'calc(100% - 46px - 60px)'
      }
      return 'calc(100% - 46px)'
    },
    isHome() {
      return !!(
        this.$route.query.isHome ||
                this.$route.path === '/' ||
                this.$route.meta.isHome
      )
    }
  },
  async created() {
    this.nativeHandlerApp()
    const userInfo = await this.$nativeHandler('getBaseInfo', '')
    this.updateUserInfo(userInfo)
  },
  mounted() {
    // 动态获取头部占位高度，解决不同分辨率的手机头部高度存在差异
    this.navBarHeight = this.$refs.headerBarRef.$el.offsetHeight
    // 发布到移动平台后，需下行代码
    /* if (process.env.NODE_ENV === 'production') {
      getServerTime().then(() => {

      })
    } */
  },
  methods: {
    ...mapMutations(['updateUserInfo']),
    headerTransition() {
      return this.direction === 'forward'
        ? 'header-fade-in-right'
        : 'header-fade-in-left'
    },
    pageBack() {
      // 路由带isHome=true参数，就可以立即返回原生
      if (
        this.$route.query.isHome ||
                (this.$route.meta && this.$route.meta.isHome)
      ) {
        // this.backOrigin()
        return
      }
      switch (this.$route.path) {
        case '/':
          this.backOrigin()
          break
        default:
          this.$router ? this.$router.back() : this.backOrigin()
          break
      }
    },
    goHome() {
      this.$router.push('/')
    },
    backOrigin() {
      this.$nativeHandler('closeWeb', '')
    },
    nativeHandlerApp() {
      this.$nativeHandler('setStatusBarColor', { color: '#12B9A3' })
      this.$nativeHandler('isQuanUBase')
        .then((res) => {
          this.$store.state.app.isOnQuanUBase = res
        })
        .catch((err) => {
          this.$store.state.app.isOnQuanUBase = false
          this.$toast.fail('请在全友统一移动应用平台中使用' + err)
          this.$router.push('/404')
        })
    }
  }
}
</script>
<style lang="less">
#app {
    font-family: PingFang-Regular;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height: 100%;
    position: relative;
}

html,
body {
    height: 100%;
    width: 100%;
    background-color: @defualt-bg;
}
* {
    margin: 0;
    padding: 0;
}

.nav-left-box {
    display: flex;
    align-items: center;
}

/* 主界面动画 */
.app-pop-out-enter-active,
.app-pop-out-leave-active,
.app-pop-in-enter-active,
.app-pop-in-leave-active {
    will-change: transform;
    transition: all 150ms;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    perspective: 1000;
}

.app-pop-out-enter {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
}

.app-pop-out-leave-active {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
}

.app-pop-in-enter {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
}

.app-pop-in-leave-active {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
}

/*顶部*/

.left-bar {
    display: flex;
    align-items: center;
}
.green-header {
    background-color: #12b9a3 !important;
    color: #fff;
    /deep/ .nav-icon {
        color: #fff;
    }
}

/* 其他 */
// .bodyBox {
//     padding-top: 46px;
//     // 这个属性有毒
//     // width: 100%;
//     // height: calc(100% - 46px);
// }

.bodyBox /deep/ .van-button--primary {
    background-color: #16bc83 !important;
    border-color: #16bc83 !important;
}

/*指标说明图标*/
.icon_inst {
    margin-left: 5px;
    width: 14px;
    height: auto;
}
</style>
